<!--
  功能：控制器状态
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2023年08月05日 12:16:55
-->
<template>
  <a-tabs v-model:activeKey="activeKey" type="card" class="y-tabs">
    <a-tab-pane key="kongZhiQiZhuangTai" tab="控制器状态">
      <a-table bordered :data-source="dataSource" :columns="columns" class="y-table" :pagination="false">
      </a-table>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
const activeKey = ref('kongZhiQiZhuangTai')

// 表格数据
const dataSource = ref([
  { key: '1', controller: '控制器1', status: '正常' },
  { key: '2', controller: '控制器2', status: '异常' }
])

// 表格列
const columns = ref([
  {
    title: '控制器',
    dataIndex: 'controller',
    key: 'controller',
    align: 'center',
    sorter: {
      compare: (a, b) => a.controller.localeCompare(b.controller),
      multiple: 2
    }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    sorter: {
      compare: (a, b) => a.status.localeCompare(b.status),
      multiple: 1
    }
  }
])
</script>

<style scoped lang="scss">
.y-col {
  margin-bottom: 8px;
}

.y-shebeixinxi-title {
  color: tomato;
  font-weight: bold;
  font-size: 16px;
}
.y-shebeixinxi-chuliqi-title,
.y-shebeixinxi-neicunshiyonglv-title {
  font-size: 14px;
  font-weight: bold;
}
.y-shebeixinxi-neicunshiyonglv {
  margin-top: 4px;
}

::v-deep.ant-descriptions .ant-descriptions-header {
  margin: 0px 0px 10px 0px;
}
::v-deep.ant-descriptions.ant-descriptions-bordered .ant-descriptions-item-label {
  background: #dfeffc url('../../assets/images/menu-btn-bg.png') 50% 50% repeat-x;
  font-weight: bold;
  color: #2e6e9e;
  margin-bottom: 2px;
}
</style>
